<template>
  <div class="Detail">
    <div class="mixin">
      <div class="paper-detail">
        <div class="item-header">
          <div class="item-title-wrapper">
            <h1 class="item-title">基于自适应遗传算法的军事训练计划智能编排</h1>
          </div>
          <div style="display: flex;align-items: center;">
                <div class="button1" >
                  <i class="iconfont icon-zhongyingwen"></i>翻译
                </div>
            <div class="item-action">
            <i class="iconfont icon-shoucangliang"></i>
            收藏
          </div>
          </div>
        
        </div>

        <div class="actions">
          <el-button
            type="primary"
            class="bt1"
            icon="iconfont icon-wenjianyulan"
            plain
            >在线阅读</el-button
          >
          <el-button
            type="primary"
            class="bt2"
            icon="iconfont icon-xiazai"
            plain
            >下载附件</el-button
          >
          <el-button
            type="primary"
            class="bt3"
            icon="iconfont icon-daochu2"
            plain
            >导出元数据</el-button
          >
        </div>
        <div class="info-item">
          <span class="label">时间：</span>
          <div class="zi">2012.12.12</div>
        </div>
        <div class="info-item">
          <span class="label">作者：</span>
          <div class="zi">张五星 朱敬东 许东昌 张晓雨</div>
        </div>
        <div class="info-item">
          <span class="label">机构：</span>
          <div class="zi">中国电子科技集团公司第五十二研究所 310000</div>
        </div>
        <div class="info-item">
          <span class="label">摘要：</span>
          <div class="zi">
            针对军事训练计划手工拟制复杂、耗时长的问题,提出一种基于自适应遗传算法的军事训练计划智能编排方法。通过分析军事训练计划编排涉及的要素及编排特点,将军事训练计划拟制问题抽象为数学模型,基于自适应遗传算法的原理完成了军事训练计划智能编排算法的设计,并采用面向对象的开发方法实现了军事训练计划智能编排功能,为计算机辅助军事训练计划编排提供了一种解决方案。仿真结果表明,该方法能够产生较好的可行解,能有效提高军事训练计划拟制效率。
          </div>
        </div>
        <div class="info-item">
          <span class="label">来源：</span>
          <div class="zi">《火力与指挥控制》</div>
        </div>
        <div class="info-item">
          <span class="label">关键词：</span>
          <div class="zi">遗传算法; 军事训练; 智能编排; 训练计划</div>
        </div>

        <div class="related-resources">
          <div class="related-resources__header">
            <div class="related-resources__line1"></div>
            <h3 class="related-resources__title">相关资源推荐</h3>
            <div class="related-resources__line2"></div>
          </div>
        </div>

        <div class="resources">
          <relatedResources></relatedResources>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import relatedResources from "@/components/relatedResources.vue";
export default {
  components: {
    relatedResources,
  },
  name: "PaperDetail",
};
</script>

<style lang="scss" scoped>
 .button1 {
        width: 73px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #327dff;
        border-radius: 4px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        margin-right: 40px;

        i {
          font-size: 18px;
          margin-right: 4px;
        }
      }
.related-resources {
  // padding: 20px 0;
  margin-top: 45px;
}

.related-resources__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.related-resources__line1 {
  width: 550px;

  height: 2px;
  background: linear-gradient(90deg, rgba(50, 125, 255, 0) 0%, #327dff 100%);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 2px solid #327dff;
    width: 6px;
    height: 7px;
    border-radius: 50%;
  }
}

.related-resources__line2 {
  width: 550px;
  height: 2px;
  background: linear-gradient(90deg, #327dff 0%, rgba(50, 125, 255, 0) 100%);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 2px solid #327dff;
    width: 6px;
    height: 7px;
    border-radius: 50%;
  }
}

.related-resources__title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24px;
  color: #333333;
}

.bt1 {
  background: #f1a33b;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  border: none;

  &:hover {
    color: #ffffff;

    background: #d08118;
  }
}

.bt2 {
  background: #6cbc1f;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  border: none;

  &:hover {
    color: #ffffff;

    background: #559914;
  }
}

.bt3 {
  background: #327dff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  border: none;

  &:hover {
    color: #ffffff;
    background: #1d64e0;
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .item-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #333333;
    line-height: 30px;
  }

  .item-action {
    i {
      font-size: 18px;
      color: #999999;
    }

    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
  }
}

.Detail {
  padding-top: 24px;
  padding-bottom: 40px;
  display: flex;
  background: #f9faff;
  flex-direction: column;
  align-items: center;

  .mixin {
    width: 1400px;
    display: flex;
  }
}

.paper-detail {
  width: 100%;
  background: #fff;
  padding: 39px 62px 39px 62px;

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .info-item {
    margin-bottom: 15px;
    display: flex;

    .label {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      margin-right: 10px;
      color: #333333;
      font-size: 18px;
    }

    .zi {
      // width: 1078px;
      width: 1194px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #333333;
    }
  }
}
</style>
